<template>
  <div>
    <h1>App</h1>

    <button
      v-for="tab in tabs"
      :key="tab.name"
      :class="{ active: tab.name === curTabName }"
      @click="curTabName = tab.name"
    >
      {{ tab.label }}
    </button>

    <hr />

    <component :is="curTabName"></component>
  </div>
</template>

<script>
import Loading from "./components/Loading.vue";
import Home from "./components/Home.vue";
import Category from "./components/Category.vue";
// 静态引入
// import Cart from "./components/Cart.vue";

// 导出组件的配置对象
export default {
  components: {
    Home,
    Category,
    // 异步引入，组件就会变成异步组件，该组件的资源不会打包到主要的构建产物中，而是会重新生成一个 js 资源，等到该组件真实需要渲染的时候才会去加载该 js 资源，且会缓存该资源

    // 生成的 js 资源文件名是随机的。
    // Cart: () => import("./components/Cart.vue"),

    // 可以在 import() 中添加如下的注释来修改文件名
    // Cart: () => import(/* webpackChunkName: "abcd" */ "./components/Cart.vue"),

    // 加载过程中,可以提供一些加载中的状态
    Cart: () => ({
      // 要加载的组件
      component: import(/* webpackChunkName: "abcd" */ "./components/Cart.vue"),

      // 加载过程中要渲染什么组件
      loading: Loading,
    }),
  },

  data() {
    return {
      tabs: [
        { label: "首页", name: "Home" },
        { label: "分类页", name: "Category" },
        { label: "购物车", name: "Cart" },
      ],
      curTabName: "Home",
    };
  },
};
</script>

<style>
@import "./global.css";
</style>
